<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=1">

	<title>IT教育网2017课程学习情况</title>
</head>

<!-- 基本资源库 -->
<script src="./bin/jquery-3.1.1.min.js"></script>
<script src="./bin/jquery-ui.min.js"></script>
<script src="./bin/jquery.fullpage.min.js"></script>

<!-- 获取H5的相关资源 内容管理对象-->
<script src="./component/H5.js"></script>
<script src="./component/h5Loading.js"></script>
<link rel="stylesheet" type="text/css" href="./css/H5.css">
<style type="text/css">
	html,body{
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}
	.fp-tableCell{
		overflow: hidden;
	}
	.h5_page_face{
		background: url('./image/face_bg.png');
	}
	.h5_component_slogan {
		-webkit-animation: rock 2s infinite 2s;
	}
	.h5_component_back{
		-webkit-animation: back 2s infinite 2s;
	}
	@-webkit-keyframes rock{
		0%{transform: rotate(0deg)}
		5%{transform: rotate(3deg)}
		10%{transform: rotate(-4deg)}
		15%{transform: rotate(3deg)}
		20%{transform: rotate(-2deg)}
		25%{transform: rotate(2deg)}
		30%{transform: rotate(-1deg)}
		70%{transform: rotate(1deg)}
		100%{transform: rotate(0deg)}
	}
	@-webkit-keyframes back{
		50%{ top : 25px;}
	}
	.h5_page_page,
	.h5_page_tail {
		background-image: url('./image/page_bg.png');
	}
	.h5_component_caption{
		background-image: url('./image/page_caption_bg.png');
		width: 283px;
		height: 160px;
		text-align: center;
		line-height: 140px;
		font-size: 20px;
		color: #fff;
	}
	.loading{
		width: 50px;
		height: 50px;
		margin: auto;
		position: relative;
		top: 50%;
		margin-top: -50px;
	}

	.loading-point0{
		width: 100%;
		height: 100%;
		background: #295ED4;
		border-radius: 50%;
		opacity: 0.6;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-animation: bound 2s infinite 0s;

	}
	.loading-point1{
		width: 100%;
		height: 100%;
		background: #295ED4;
		border-radius: 50%;
		opacity: 0.6;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-animation: bound 2s infinite 1s;

	}
	@keyframes bound{
		50%{
			transform : scale(1);

		}
		0%,100%{
			transform : scale(0);

		}
	}
	.loading-per{
		width: 100%;
		text-align: center;
		position: absolute;
		bottom: -20px;
		color: #295ED4;


	}
</style>



<body>

	<div class="loading">

		<div class="loading-point0"></div>
		<div class="loading-point1"></div>
		<div class="loading-per">0%</div>

	</div>
	

<!-- 获取组件的相关资源文件 -->
<script>
	//获取组件文件名
	var res = ["Base","Point","Bar","Polyline","Radar","Pie","Ring"];

	var html = [];
	for(var i = 0; i < res.length; i++){
		html.push("<script src='./component/h5Component"+res[i]+".js'><\/script>");
		html.push("<link rel='stylesheet' type='text/css' href='./css/h5Component"+res[i]+".css'>");
	}
	// 写入document里面
	document.write(html.join(" "));
</script>

<!-- 导入页面和组件 -->
<script type="text/javascript">
	$(function () {
		var h5 = new H5();
		var images = ['./image/page_bg.png','./image/page_caption_bg.png',"./image/footer.png","./image/face_logo.png", "./image/face_slogan.png","./image/face_img_left.png","./image/face_img_right.png", "./image/description_bg.gif","./image/p1_people.png",
"./image/tail_logo.png","./image/tail_slogan.png", "./image/tail_share.png", "./image/tail_back.png"];
		h5.whenAddComponent = function () {
			// debugger;
			this.addComponent("footer",{
					center: true,
					// 由于图片宽度不够，设置页面的宽度
					// 为组件的宽度
					// 图片高度是宽度的0.0625倍
					width : $("html").width() * 2,
					height: $("html").width() * 2 * 0.0625,
					bg    : "./image/footer.png",

					css:{
						bottom: -10,
						opacity: 0,
						zIndex : 99, 
					},
					animateIn: {
						bottom: -2,
						opacity: 1
					},
					animateOut: {
						bottom: -10,
						opacity: 0
					},
				});
		}

		
		h5
		.addPage("face")
			.addComponent("topic",{
				center: true,
				width : 395,
				height: 130,
				bg    : "./image/face_logo.png",

				css:{
					opacity: 0, 
				},
				animateIn: {
					top: 100,
					opacity: 1
				},
				animateOut: {
					top: 0,
					opacity: 0
				},
			})
			.addComponent("slogan",{
				center: true,
				width : 365,
				height: 99,
				bg    : "./image/face_slogan.png",

				css:{
					opacity: 0, 
					top: 180
				},
				animateIn: {
					left: "50%",
					opacity: 1
				},
				animateOut: {
					left: "0%",
					opacity: 0
				},
				delay : 500,
			})
			.addComponent("face_img_left",{
				width : 370,
				height: 493,
				bg    : "./image/face_img_left.png",
				css:{
					opacity: 0, 
					bottom: -50,
					left: -50,
				},
				animateIn: {
					bottom: 0,
					left: 0,
					opacity: 1,
				},
				animateOut: {
					opacity: 0,
					bottom: -50,
					left: -50,
				},
				delay : 1000,
			})
			.addComponent("face_img_right",{
				width : 276,
				height: 449,
				bg    : "./image/face_img_right.png",
				css:{
					opacity: 0, 
					bottom: -50,
					right: -50,
				},
				animateIn: {
					bottom: 0,
					right: 0,
					opacity: 1,
				},
				animateOut: {
					opacity: 0,
					bottom: -50,
					right: -50,
				},
				delay : 1000,
			})
		.addPage("page")
			.addComponent("caption",{
				text  : "核心理念"
			})
			.addComponent("text",{
				center: true,
				width : 500,
				height: 30,
				text  : "IT教育网=只学有用的",
				css:{
					opacity: 0,
					top : 240,
					textAlign: 'center',
					fontSize : 24,
					fontWeight : "bold",
					color : 'red',
				},
				animateIn: {
					top: 120,
					opacity: 1
				},
				animateOut: {
					top: 240,
					opacity: 0
				},
			})
			.addComponent("description",{
				center: true,
				width : 522,
				height: 336,
				bg : "./image/description_bg.gif",
				text  : "2013年，IT教育网的诞生引领中国IT职业从教育进入新时代；高质量实战课程、全新教学模式、实时互动学习，以领先优势打造行业品牌；迄今为止，IT教育网已成为中国规模最大、互动性最高的IT技能学习平台。",
				css:{
					top : 190,
					opacity: 0,
					padding: "15px 10px",
					textAlign: 'justify',
					fontSize : "15px",
					lineHeight : "18px",
					color : '#fff',
				},
				animateIn:{opacity : 1,top : 190},
                animateOut:{opacity : 0,top : 240},	
                delay : 500 	
            })
			.addComponent("people",{
				center: true,
				width : 516,
				height: 306,
				bg : "./image/p1_people.png",
				css:{
					bottom : 40,
					opacity: 0,
				},
				animateIn:{opacity : 1,bottom : 40},
                animateOut:{opacity : 0,bottom : 0},
                delay : 1000 	
            })


		.addPage("page")
			.addComponent("caption",{
				text  : "课程方向分布"
			})
			.addComponent("polyline",{
				type  : "polyline",
	            data:[
	                ['前端开发' , .5  ,'#ff7676'],
	                ['后端开发' , .1 ],
	                ['移动开发' , .25  ],
	                ['图像处理' , .15  ]
	            ],
				width : 530,
				height: 300,
				css : {
                    top:200,
                    opacity:0
                },
	            animateIn:{
	                opacity:1,
	                top:250,
	            },
	            animateOut:{
	                opacity:0,
	                top:200,
	            },
				center: true,
				delay : 400,
			})
			.addComponent("msg",{
				text : "前端课程占到40%",
				css  : {
					opacity : 0,
					fontSize: 20,
					fontWeight: "bold",
					color : "#ff7676",
					width : "100%",
					top: 120,
					textAlign : "center",
					opacity : 0,
				},
				animateIn:{opacity : 1,top : 160},
                animateOut:{opacity : 0,top : 120},
			})

		.addPage("page")
			.addComponent("caption",{
				text  : "移动开发课程资源"
			})
			.addComponent("pie", {
                type : 'pie',
                
                width : 300,
                height : 300,
                data:[
                    ['Android',.55],
                    ['IOS' , .1 ,'#ff7676'],
                    ['Cocos2d' , .2 ],
                    ['Unity-3D' , .15  ],
                ],
				css:{
                    top:150,
                    opacity:0
	            },
	            animateIn:{
	                opacity:1,
	                top:200,
	            },
	            animateOut:{
	                opacity:0,
	                top:150,
	            },
				center: true,
          	})
			.addComponent("msg",{
				text : "Android移动课程占到55%",
				css  : {
					opacity : 0,
					fontSize: 20,
					fontWeight: "bold",
					color : "#ff7676",
					width : "100%",
					bottom: 100,
					textAlign : "center",
					opacity : 0,
				},
				animateIn:{opacity : 1,bottom : 120},
                animateOut:{opacity : 0,bottom : 100},
				delay : 1000,
			})

		.addPage("page")
			.addComponent("caption",{
				text  : "前端开发"
			})
			.addComponent("bar",{
                type : 'bar',
                
                width : 600,
                height : 600,
                data:[
                    ['ReactJS' ,.25 ],
                    ['AngularJS' ,.05],
                    ['Js' , .5,'#ff7676'],
                    ['CSS3' , .1 ],
                    ['HTML5' , .2  ],
                    ['PHP' , .05  ],
                    ['jQuery' , .25 ],
                    ['Bootstrap' , .2]
                ],
                css : {
                    top:200,
                    opacity:0,
                },
                animateIn:{
                    opacity:1,
                    top:250,
                },
                animateOut:{
                    opacity:0,
                    top:200,
                },
                center : true,
			})

			.addComponent("msg",{
				text : "前端课程 JavaScript占到50%",
				css  : {
					opacity : 0,
					fontSize: 20,
					fontWeight: "bold",
					color : "#ff7676",
					width : "100%",
					bottom: 100,
					textAlign : "center",
					opacity : 0,
				},
				animateIn:{opacity : 1,bottom : 120},
                animateOut:{opacity : 0,bottom : 100},
				delay : 1000,
			})

		.addPage("page")
			.addComponent("caption",{
				text  : "后端开发课程"
			})

			.addComponent("radar",{
                type : 'radar',
                
                width : 400,
                height : 400,
                data:[
                    ['Java' , .85 ],
                    ['Js' , .1 ,'#ff7676'],
                    ['PHP' , .23 ],
                    ['Go' , .45 ],
                    ['HTML5' , .58  ],
                    ['C++' , .14 ],
                    ['jQuery' , .15 ],
                ],
                css : {
                    top:100,
                    opacity:0
                },
                animateIn:{
                    opacity:1,
                    top:200,
                },
                animateOut:{
                    opacity:0,
                    top:100,
                },
                center : true,
			})

			.addComponent("msg",{
				text : "后端课程 Java占到85%",
				css  : {
					opacity : 0,
					fontSize: 20,
					fontWeight: "bold",
					color : "#ff7676",
					width : "100%",
					bottom: 100,
					textAlign : "center",
					opacity : 0,
				},
				animateIn:{opacity : 1,bottom : 120},
                animateOut:{opacity : 0,bottom : 100},

			})

		.addPage("page")
			.addComponent("caption",{
				text  : "报名人数过万"
			})
			.addComponent("ring",{
                type : 'ring',
                
                width : 300,
                height : 300,
                data:[
                    ['总课程' , .7,'#ff7676'],
                ],
                css : {
                    top:120,
                    opacity:0
                },
                animateIn:{
                    opacity:1,
                },
                animateOut:{
                    opacity:0,
                },
                center : true,
			})

			.addComponent("msg",{
				text : "不同课程报名人数超过一万占比",
				css  : {
					opacity : 0,
					fontSize: 20,
					fontWeight: "bold",
					color : "#ff7676",
					width : "100%",
					top: 300,
					textAlign : "center",
					opacity : 0,
				},
				animateIn:{opacity : 1 },
                animateOut:{opacity : 0 },
                delay: 500

			})
			.addComponent("ring-1",{
                type : 'ring',
                
                width : 150,
                height : 150,
                data:[
                    ['前端开发' , .6,'darkorange'],
                ],
                css : {
                    top:350,
                    left: 30,
                    opacity:0
                },
                animateIn:{
                    opacity:1,
                },
                animateOut:{
                    opacity:0,
                },
                delay: 1000
			})
			.addComponent("ring-2",{
                type : 'ring',
                
                width : 150,
                height : 150,
                data:[
                    ['后端开发' , .55,'darkorange'],
                ],
                css : {
                    top:350,
                    opacity:0
                },
                animateIn:{
                    opacity:1,
                },
                animateOut:{
                    opacity:0,
                },
                delay: 1200,
                center : true,
			})
			.addComponent("ring-3",{
                type : 'ring',
                
                width : 150,
                height : 150,
                data:[
                    ['移动开发' , .75,'darkorange'],
                ],
                css : {
                    top:350,
                    right: 30,
                    opacity:0
                },
                animateIn:{
                    opacity:1,
                },
                animateOut:{
                    opacity:0,
                },
                delay: 1400
			})
			.addComponent("ring-4",{
                type : 'ring',
                
                width : 150,
                height : 150,
                data:[
                    ['产品设计' , .66,'darkorange'],
                ],
                css : {
                    top:430,
                    right: "55%",
                    opacity:0
                },
                animateIn:{
                    opacity:1,
                },
                animateOut:{
                    opacity:0,
                },
                delay: 1600
			})
			.addComponent("ring-5",{
                type : 'ring',
                width : 150,
                height : 150,
                data:[
                    ['图形设计' , .55,'darkorange'],
                ],

                css : {
                    top:430,
                    left: "55%",
                    opacity:0
                },
                animateIn:{
                    opacity:1,
                },
                animateOut:{
                    opacity:0,
                },
                delay: 1800
			})

		.addPage("page")
			.addComponent("caption",{
				text  : "课程难度分布"
			})
			.addComponent("point",{
				type  : "point",
	            data:[
	                ['中级' , .5  ,'#ff7676'],
	                ['初级' , .2  ,'#b8c975', -30 ,'-40%'],
	                ['高级' , .5  ,'#99c1ff', 60 ,'-120%']
	            ],
                center : true,
	            css : {
                    top:300,
                    opacity:0
                },
                animateIn:{
                    opacity:1,
                },
                animateOut:{
                    opacity:0,
                },

	        
				width : 250,
				height: 250,
				// bg:"../image/p1_people.png",
				center: true,
			})

		.addPage("tail")
			.addComponent("logo",{
				center: true,
				width : 360,
				height: 130,
				bg    : "./image/tail_logo.png",

				css:{
					top: 240,
					opacity: 0, 
				},
				animateIn: {
					top: 210,
					opacity: 1
				},
				animateOut: {
					top: 240,
					opacity: 0
				},
			})
			.addComponent("slogan",{
				center: true,
				width : 314,
				height: 46,
				bg    : "./image/tail_slogan.png",

				css:{
					top: 280,
					// left: "0%",
					opacity: 0, 
				},
				animateIn: {
					left: "50%",
					opacity: 1
				},
				animateOut: {
					left: "0%",
					opacity: 0
				},
				delay : 500
			})
			.addComponent("share",{
				width : 128,
				height: 120,
				bg    : "./image/tail_share.png",

				css:{
					right : 110,
					top: 110,
					opacity: 0, 
				},
				animateIn: {
					right : 10,
					top: 10,
					opacity: 1
				},
				animateOut: {
					right : 110,
					top: 110,
					opacity: 0
				},
				delay : 1000
			})
			.addComponent("back",{
				center: true,
				width : 52,
				height: 50,
				bg    : "./image/tail_back.png",
				css:{ top: 20 },

				onclick : function () {
					$.fn.fullpage.moveTo(1);
				}
			})
		

		.loader(images);

	})
</script>
	
</body>
</html>